<template>
  <view class="assetTransfer">
    <u-sticky>
      <view class="tabbar">
        <view class="nav">
          <u-search @change="change" placeholder="请输入资产名称" v-model="model.input" bgColor="#fff" :showAction="false">
          </u-search>
        </view>
        <u-subsection style="position: relative;z-index: 999;" :list="list" :current="curNow" @change="sectionChange">
        </u-subsection>
      </view>
    </u-sticky>

    <!-- 列表刷新 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="true"
      :up="upOption">

      <view class="list">
        <view class="list-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
          <view class="list-item-left">
            <u-icon name="play-right-fill" color="#0d6fb8"></u-icon>
          </view>
          <view class="list-item-right">
            <view class="name">编号{{ item.no }}</view>
            <view>
              <text>申请人：{{ item.creatUserName }} </text>
            </view>
            <view>
              <text>审批人：{{ item.exUserName ? item.exUserName : '----' }}</text>
            </view>
          </view>
          <view :class="item.state != '已完成' ? 'state' : 'stateTwo'">{{ item.state }}</view>
        </view>
      </view>
    </mescroll-body>
    <tab-bar :currentPage="4"></tab-bar>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      // 类型 1我的申请 2我的审批(待审批) 3审批历史
      list: ['我的申请', '我的审批', '审批历史'],
      curNow: 0,
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
          time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
        },
        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        textNoMore: '-- 无更多数据 --', // 没有更多数据的提示文本
      },
      dataList: [],
      model: {
        input: '',
        type: 1,
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    sectionChange(index) {
      this.curNow = index;
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    // 搜索
    change(e) {
      this.model.input = e
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.model.pageIndex = page.num
      this.model.pageSize = page.size
      this.model.type = this.curNow == 0 ? 1 : this.curNow == 1 ? 2 : 3
      this.$u.api.AssetsScrapGetList(this.model).then(res => {
        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize

        this.mescroll.endBySize(res.data.length, res.count); //必传参数(当前页的数据个数, 总数据量)
        //设置列表数据
        if (this.model.pageIndex == 1) this.dataList = []; //如果是第一页需手动制空列表
        this.dataList = this.dataList.concat(res.data); //追加新数据

      }).catch(() => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },

    toDetail(val) {
      uni.navigateTo({
        url: '/pages/retirement/detail?objectID=' + val.objectID
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.assetTransfer {
  .tabbar {
    position: sticky;
    top: var(--window-top);
    background-color: #fff;
    z-index: 999;
  }

  .nav {
    padding: 10px;
  }

  .list {
    .list-item {
      display: flex;
      align-items: center;
      position: relative;
      margin: 20upx auto;
      padding: 16upx;
      background: #ffffff;

      .list-item-left {
        margin-right: 20rpx;
        display: flex;
      }

      .list-item-right {
        view {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .no {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .name {
          font-size: 30rpx;
          color: #333333;
        }
      }

      .state {
        position: absolute;
        top: 10upx;
        right: 10upx;
        color: #e7605d;
        font-size: 26rpx;
      }

      .stateTwo {
        position: absolute;
        top: 10upx;
        right: 10upx;
        color: #42ae4b;
        font-size: 26rpx;
      }

      .more {
        position: absolute;
        bottom: 30rpx;
        right: 20rpx;
      }
    }
  }
}
</style>
